<script setup>
import router from '@/router';
import { ref } from 'vue'
import { NavBar,Button,Popup,Image,PullRefresh,List, Toast,SwipeCell } from 'vant';
import http from '@/http';
const letterList = ref([])
const loading = ref(false)
const storeId = ref(JSON.parse(localStorage.getItem('shop')).shopDescription)
const onClickLeft = () => {
    router.back()
}

const addLetterShow = ref(false)
const message = ref('')
const addLetter = () => {
    addLetterShow.value = true
}

const cancel = () => {
    addLetterShow.value = false
}

const onRefresh = async() => {
    console.log('下拉刷新');
    const res = await http.post(`/selectPLHS/${storeId.value}`)
    letterList.value = res.data
    loading.value = false;
}

const add = async() => {
    if(!message.value.trim())return Toast('请输入内容')
    console.log(isEdit.value);
    if(isEdit.value){
        // 修改
        const res = await http.post('updateZDHJL',{
            state:3,
            plhs:message.value,
            id:letterList.value[isEdit.value].id,
            storeId:storeId.value
        })
        setTimeout(()=>{
            getList()
            addLetterShow.value = false
            isEdit.value = false
            Toast('修改成功')
        },300)
    }else{
        const res = http.post('savePLHS',{
            plhs:message.value,
            state:3,
            storeId:storeId.value
        })
        setTimeout(()=>{
            getList()
            addLetterShow.value = false
            Toast('添加成功')
        },300)
    }
    
}

const delLetter = (id,index) => {
    http.post(`/removePLHS/${id}`)
    letterList.value.splice(index,1)
    Toast('删除成功')
}

const getList = async() => {
    const res = await http.post(`/selectPLHS/${storeId.value}`)
    console.log(res);
    letterList.value = res.data
}
getList()

const isEdit = ref(false)
const editLetter = (index) => {
    isEdit.value = index
    message.value = letterList.value[index].plhs
    addLetterShow.value = true
}

</script>


<template>
        <NavBar
        style="height: 15vw;line-height:15vw"
          title="私聊话术"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
          safe-area-inset-top
          clickable

        />
    <div class="page">
        <PullRefresh v-model="loading" @refresh="onRefresh" success-text="刷新成功" class="pullbox">
            <van-swipe-cell v-for="item,index in letterList" :key="index">
                <div class="letter-item">
                    <div class="letter-item-top">
                        <div class="letter-mark">{{index + 1}}</div>
                        <div class="letter-item-right">
                            <Image @click="editLetter(index)" class="letter-edit" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/zlsc_kbku_icon_xgai.png" />
                            <Image @click="delLetter(item.id,index)" class="letter-del" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/zlsc_kbku_icon_schu.png" />
                        </div>
                    </div>
                    <div class="latter-item-text">{{item.plhs}}</div>
                </div>
              <template #right>
                <van-button @click="delLetter(item.id,index)" square text="删除" type="danger" class="delete-button" />
              </template>
            </van-swipe-cell>
        </PullRefresh>
        <div class="fixed">
            <div class="fixed-btns">
                <Button class="btns-add" round block type="primary" @click="addLetter">新增话术</Button>
                <Button class="btns-ver" round block type="primary">确定</Button>
            </div>
            <div class="fixed-bottom"></div>
        </div>
    </div>
    <Popup v-model:show="addLetterShow" round="3.2vw">
        <div class="add-letter">
             <van-field
                class="add-letter-input"
                 v-model="message"
                 rows="1"
                 autosize
                 type="textarea"
                 placeholder="请输入内容"
                />
            <div class="popup-btns">
                <div class="popup-cancel" @click="cancel">取消</div>
                <div class="popup-verify" @click="add">确认</div>
            </div>
        </div>
    </Popup>
</template>

<style scoped>
    ::v-deep .van-nav-bar__content{
        height: 100%;
    }
    .page{
        position: fixed;
        width: 100%;
        background-color: rgb(245,247,250);
        height: 100%;
        padding: 4vw 3vw;
        box-sizing: border-box;
    }
    .pullbox{
        overflow-y:scroll;
        height: calc(100% - 34vw);
    }
    .letter-item{
        width: 100%;
        border-radius: 2vw;
        padding: 5vw 4vw;
        background-color: #fff;
        box-sizing: border-box;
        margin-bottom: 3vw;
    }
    .letter-item-top{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 4vw;
    }
    .letter-item-right{
        display: flex;
    }
    .letter-edit{
        width: 6.4vw;
        height: 6.4vw;
        margin-right: 4vw;
    }
    .letter-del{
        width: 6.4vw;
        height: 6.4vw;
    }
    .letter-mark{
        width: 5.33vw;
        height: 5.33vw;
        border-radius: 1vw;
        background-color: rgb(48,49,51);
        text-align: center;
        line-height: 5.33vw;
        font-size: 3.2vw;
        color: #fff;
    }
    .latter-item-text{
        font-size: 3.73vw;
        color: rgb(69,70,74);
    }
    .fixed{
        position: fixed;
        bottom: 0;
        left: 0;
        background-color: #fff;
        width: 100%;
    }
    .fixed-btns{
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 13vw;
        width: 100%;
        padding-top: 1vw;
    }
    .fixed-bottom{
        height: 9vw;
    }
    .btns-add{
        width: 44vw;
        height: 12vw;
        border: 0.27vw solid rgb(142,84,244);
        color: rgb(142,84,244);
        font-size: 4.27vw;
        font-weight: 500;
        background-color: #fff;
    }
    .btns-ver{
        width: 44vw;
        height: 12vw;
        border: none;
        color: #fff;
        font-size: 4.27vw;
        font-weight: 500;
        background-color: rgb(142,84,244);
    }
    .add-letter{
        width: 80vw;
        height: 61vw;
        background-color: #fff;
        padding: 4vw;
        padding-bottom: 0;
    }
    .add-letter-input{
        width: 100%;
        height: 37vw;
        background-color: rgb(245,247,250);
    }
    .popup-btns{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 15vw;
        display: flex;
        border-top: 0.13vw,solid,rgb(235,238,245);
    }
    .popup-cancel{
        flex: 1;
        text-align: center;
        line-height: 15vw;
        color: rgb(144,147,153);
        border-right: 0.13vw,solid,rgb(235,238,245);
    }
    .popup-verify{
        flex: 1;
        text-align: center;
        line-height: 15vw;
        color: rgb(142,84,244);
    }
    .delete-button {
      height: 100%;
    }
    *{
      user-select: none;
      -webkit-user-select: none; /* Safari */
      -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* IE10+/Edge */
    }
    input {
      -webkit-user-select:auto; /*webkit浏览器*/
    }
</style>